<template>
  <div>
    <Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange">
      <view class="fb_top">
        <view class="fb_title">问题的种类</view>
        <view class="fb_tips">
          <text>功能建议</text>
          <text>购买遇到问题</text>
          <text>性能问题</text>
          <text>其他</text>
        </view>
        <!-- 输入框区 -->
        <view class="fb_content">
          <!-- 输入框 -->
          <textarea placeholder="请描述" @input="onInput"></textarea>
          <view class="tool">
            <!-- 添加图片 -->
            <button class="addPic" @click="onAddPic">+</button>
            <!-- 显示图片 -->
            <view
              class="up_pic"
              v-for="(item,index) in picArr"
              :key="index"
              @click="onClear(index)"
            >
              <UpPic :src="item"></UpPic>
            </view>
          </view>
        </view>
        <!-- 底部 -->
        <view class="footer">
          <button @click="submitBtn">
            <icon type="success_no_circle" size="23" color="white"></icon>提交
          </button>
        </view>
      </view>
    </Tabs>
  </div>
</template>

<script>
import Tabs from "../../components/tabs";
import UpPic from "../../components/uppic";
import { showToast } from "../../utils/tools";
export default {
  data() {
    return {
      tabs: [
        { id: 0, value: "体验问题", isActive: true },
        { id: 1, value: "商品/商家投诉", isActive: false }
      ],
      picArr: [],
      inputValue: ""
    };
  },
  methods: {
    onClear(index) {
      console.log("删除图片");
      console.log(index);
      const { picArr } = this.data;
      picArr.splice(index, 1);
      this.picArr = picArr;
    },
    onAddPic() {
      console.log("添加图片");
      wx.chooseImage({
        count: 9, // 最多张数
        sizeType: ["original", "compressed"], // 大小 原图 压缩
        sourceType: ["album", "camera"], // 来源 相册 相机
        success: result => {
          console.log(result);
          this.picArr = [...this.picArr, ...result.tempFilePaths];
        },
        fail: () => {},
        complete: () => {}
      });
    },
    // 接收组件的数据 index
    onTabsItemChange(index) {
      console.log("切换tabs");
      this.tabs.forEach((v, i) => {
        i === index ? (v.isActive = true) : (v.isActive = false);
      });
    },
    onInput(e) {
      console.log("输入内容");
      console.log(e);
      this.inputValue = e.target.value;
    },
    // 外网图片
    uploadPic: [],
    submitBtn() {
      console.log("提交反馈");
      if (!this.inputValue.trim()) {
        uni.showToast({
          title: "请正确输入后提交",
          icon: "none",
          duration: 1500,
          mask: "true",
          success: result => {},
          fail: () => {}
        });
        return;
      }
      wx.showLoading({
        title: "正在上传",
        mask: "true",
        success: result => {},
        fail: () => {},
        complete: () => {}
      });
      if (this.picArr.length !== 0) {
        this.picArr.forEach(v => {
          // 图传接口有问题
          wx.uploadFile({
            //只能上传一个,所以外面需要forEach
            url: "https://images.ac.cn/Home/Index/UploadAction/",
            filePath: v,
            name: "file",
            formData: {},
            success: result => {
              console.log(result);
              let url = JSON.parse(result.data).url;
              this.uploadPic.push(url);
              console.log(this.uploadPic);
              if (i === this.picArr.length - 1) {
                (this.picArr = []), (this.inputValue = "");
                wx.hideLoading();
                wx.navigateBack({ delta: 1 });
              }
            },
            fail: () => {},
            complete: () => {}
          });
        });
      } else {
        uni.showToast({
          title: "提交成功",
          icon: "success",
          duration: 1500,
          mask: "true",
          success: result => {
            wx.hideLoading();
            wx.navigateBack({
              delta: 1
            });
          },
          fail: () => {}
        });
      }
    }
  }
};
</script>

<style lang='less' scope>
page {
  background-color: #eee;
}

.fb_top {
  padding: 10rpx;

  .fb_title {
    margin-bottom: 10rpx;
  }

  .fb_tips {
    display: flex;
    // 换行
    flex-wrap: wrap;

    text {
      background-color: #fff;
      width: 30%;
      padding: 10rpx;
      margin: 10rpx 10rpx;
      text-align: center;
    }
  }

  .fb_content {
    background-color: #fff;

    textarea {
      width: 100%;
      height: 400rpx;
      margin-top: 33rpx;
      padding: 10rpx;
    }

    .tool {
      display: flex;
      flex-wrap: wrap;
      padding: 10rpx;

      button {
        width: 90rpx;
        height: 90rpx;
        margin: 0;
        margin-left: 20rpx;

        color: #ccc;
        background-color: #f6f7f6;
        border: 1rpx solid #ccc;

        font-size: 40rpx;
        font-weight: 600;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .up_pic {
        margin-left: 20rpx;
      }
    }
  }

  .footer {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row-reverse;

    button {
      margin: 0;
      padding: 10rpx;
      width: 25%;
      background-color: var(--themeColor);
      color: #fff;
    }
  }
}
</style>